import React, {useEffect} from "react";
import {Platform, StyleSheet, TouchableHighlight} from "react-native";
import {Center, Image, View} from "native-base";

export const LeftItem = ({navigation, name, photo1, laiyuan}) => {
    return <View style={styles.content}>
        {
            photo1.trim() !== '' &&
            <View style={styles.main}>
                <TouchableHighlight style={styles.imgVessels} onPress={() => {
                    navigation.navigate('ShowOneImg', {
                        img: photo1.trim()
                    })
                }}>
                    <Image style={styles.img} source={{
                        uri: (Platform.OS === 'android' || (Platform.Os === "iOS" && Platform.Version > 14))
                            ? `${photo1.trim()}?imageView2/0/format/webp/interlace/1/q/1`
                            : `${photo1.trim()}`, isStatic: true
                    }} fallbackSource={require('../../assets/error.webp')} alt="123" size="2xl" resizeMethod="resize"
                    />
                </TouchableHighlight>
                <Center _text={{fontSize: 18}}>{laiyuan}</Center>
                <Center _text={{color: '#c4c4c4', fontSize: 12}}>{name}</Center>
            </View>
        }
        {
            photo1.trim() === '' && null
        }
    </View>
};

const styles = StyleSheet.create({
    content: {
        backgroundColor: '#fff',
        height: 150,
        width: '53%',
        borderRadius: 10,
        marginBottom: 20,
        paddingRight: 20
    },
    main: {
        width: '100%',
        height: '100%',
    },
    imgVessels:{
        width:'100%',
        height: 120,
        backgroundColor:'#f2f2f2',
        borderRadius: 3,
    },
    img:{
        width:'100%',
        height:'100%',
        // backgroundPosition:'center',
        // backgroundSize:'over'
    }
})